<template>
  <!-- 弹出层 -->
  <van-popup v-model:show="data.isPicker" position="bottom" round @close="confirmOn">
    <van-picker ref="picker" title="请选择时间" :columns="data.columns"  @change="onChange" @cancel="cancelOn"
      @confirm="onConfirm" v-model="data.selectedValues" />
  </van-popup>
</template>
<script setup lang="ts">

import { reactive, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const data = reactive({
  isPicker: false, //是否显示弹出层
  columns: [], //所有时间列
  selectedValues: [] //控件选择的时间值
});
const props = defineProps({
  // 传入的显影状态
  showPicker: {
    type: Boolean
  },
  // 传入的值
  value: {
    type: String
  }
});

//定义要向父组件传递的事件
const emit = defineEmits(["cancel", "confirm"]);
const setVal = () => {
  data.selectedValues = []
  let strtime = props.value; //传入的时间
  let date = new Date(strtime.replace(/-/g, "/"));
  let timeVaules = date.getTime();
  let dateVaules;
  if (props.value != "") {
    dateVaules = new Date(timeVaules);
  } else {
    dateVaules = new Date(); //没有传入时间则默认当前时刻
  }
  
  let Y = dateVaules.getFullYear();
  let M = dateVaules.getMonth() + 1;
  let D = dateVaules.getDate();
  let h = dateVaules.getHours();
  let m = dateVaules.getMinutes();
  let s = dateVaules.getSeconds();

  // 个位数补0
  const _M = M < 10 ? `0${M}` : M.toString(); //月份比实际获取的少1，所以要加1
  const _D = D < 10 ? `0${D}` : D.toString();
  const _h = h < 10 ? `0${h}` : h.toString();
  const _m = m < 10 ? `0${m}` : m.toString();
  const _s = s < 10 ? `0${s}` : s.toString();
  
  // 生成年月日时分秒时间值
  data.selectedValues.push(Y);
  data.selectedValues.push(_M);
  data.selectedValues.push(_D);
  data.selectedValues.push(_h);
  data.selectedValues.push(_m);
  data.selectedValues.push(_s);
}
const onChange = () => {}
const getcolumns = () => {
  let strtime = props.value; //传入的时间
  let date = new Date(strtime.replace(/-/g, "/"));
  let timeVaules = date.getTime();
  let dateVaules;
  if (props.value != "") {
    dateVaules = new Date(timeVaules);
  } else {
    dateVaules = new Date(); //没有传入时间则默认当前时刻
  }
  
  let Y = dateVaules.getFullYear();
  let M = dateVaules.getMonth() + 1;
  let D = dateVaules.getDate();
  let h = dateVaules.getHours();
  let m = dateVaules.getMinutes();
  let s = dateVaules.getSeconds();
  
  // 个位数补0
  const _M = M < 10 ? `0${M}` : M.toString(); //月份比实际获取的少1，所以要加1
  const _D = D < 10 ? `0${D}` : D.toString();
  const _h = h < 10 ? `0${h}` : h.toString();
  const _m = m < 10 ? `0${m}` : m.toString();
  const _s = s < 10 ? `0${s}` : s.toString();
  
  let year = []; //获取前后十年数组
  year.values = [];
  let Currentday = new Date().getFullYear();
  for (let i = Currentday - 10; i < Currentday + 10; i++) {
    year.push({ text: i.toString(), value: i });
  }
  year.defaultIndex = year.values.indexOf(Y); //设置默认选项当前年
  
  data.columns.push(year); //生成年列
  
  let month = []; //获取12月数组
  month = Object.keys(Array.apply(null, { length: 13 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: (+item) + '' , value: (+item) + ''  };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  month.splice(0, 1);
  data.columns.push(month); //生成月列
  
  //获取当月的天数
  let days = getCountDays(Y, M + 1);
  let day = []; //创建当月天数数组
  day = Object.keys(Array.apply(null, { length: days + 1 })).map(function (
    item
  ) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: (+item) + '', value: (+item) + '' };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  day.splice(0, 1);
  data.columns.push(day); //生成日列
  
  let hour = []; //创建小时数组
  hour = Object.keys(Array.apply(null, { length: 24 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: (+item) + '', value: (+item) + '' };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  data.columns.push(hour); //生成小时列
  
  let mi = []; //创建分钟数组
  mi = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: (+item) + '', value: (+item) + '' };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  data.columns.push(mi);//生成分钟列
  
  let ss = []; //创建秒数数组
  ss = Object.keys(Array.apply(null, { length: 60 })).map(function (item) {
    if (+item + 1 <= 10) {
      return { text: "0" + item, value: "0" + item };
    } else if (+item + 1 == 11) {
      return { text: (+item) + '', value: (+item) + '' };
    } else {
      return {
        text: (+item + 0).toString(),
        value: (+item + 0).toString()
      };
    }
  });
  data.columns.push(ss);//生成秒钟列
}
const getCountDays = (year, month) => {
  //获取某年某月多少天
  let day = new Date(year, month, 0);
  return day.getDate();
}
// 关闭弹框
const confirmOn = () => {
  emit("cancel");
}
//时间选择器关闭 值不改变并关闭弹框
const cancelOn = () => {
  emit("cancel");
}

// 时间选择器确定 值改变
const onConfirm = ({ selectedValues }) => {
  let endval =
    selectedValues[0] +
    "-" +
    selectedValues[1] +
    "-" +
    selectedValues[2] +
    " " +
    selectedValues[3] +
    ":" +
    selectedValues[4] +
    ":" +
    selectedValues[5];
  emit("confirm", endval);
}
onLoad(() => {
  getcolumns()
})
watch(
  () => props.showPicker,
  val => {
    data.isPicker = val;
    setVal()
  },
  {
    deep: true,
    immediate: true//立即监听--进入就会执行一次 监听显影状态
  }
);
</script>


